<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>watchEffect</title>
  </head>
  <body>
    <div id="app">
      {{ count }}
      <ul>
        <li @click="id=1">请求第一条数据</li>
        <li @click="id=2">请求第er条数据</li>
        <li @click="id=3">请求第san条数据</li>
      </ul>

      {{ data }}
    </div>
  </body>
  <script src=""></script>
  <script>
    const { ref, watchEffect } = Vue;
    Vue.createApp({
      steup() {
        const count = ref(0);
        const increment = () => {
          count.value++;
        };
        const stop = watchEffect(() => {
          console.log("count的值为" + count.value);
        });
        const stopWatch = () => {
          stop();
        };
        const id = ref(1);
        const data = ref("");

        watchEffect((clear) => { // 自定义取消副作用的函数
          console.log(id.value); //  关键- 引起当前watchEffect的二次执行
          const timer = setTimeout(() => {
            console.log("成功"); // 2秒之内点击列表 只显示一次
            data.value = "数据" + id.value;
          }, 2000);

          //消除副作用
          clear(() => {
            clearTimeout(timer);
          });
        });
        return {
          count,
          increment,
          stopWatch,
          id,
          data,
        };
      },
    }).mount("#app");
  </script>
</html>
